<template>
	<view class="radio-selector-container" v-if="options.length">
		<view class="header">
			<span class="title">{{title}}</span>
		</view>

		<view class="options" v-for="item in options">
			<view class="option" :class="{ 'selected': selectedOption === item.id }"
				@click="selectOption(item)">
				<span class="option-text">{{item.name}}</span>
				<span class="checkmark" v-if="selectedOption === item.id">✓</span>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const emit = defineEmits(['change']);
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		options: {
			type: Array,
			default: () => []
		},
		selectedOption: {
			type: String,
			default: '0',
		}	
	})

	const selectOption = (option) => {
		emit('change', option);
	};
</script>

<style scoped>
	.radio-selector-container {
		background-color: white;
		padding: 16px;
		min-height: 500px;
	}

	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 16px;
	}

	.title {
		font-size: 16px;
		color: #333;
		font-weight: 500;
	}

	.options {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.option {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 12px;
		cursor: pointer;
		transition: background-color 0.2s;
	}

	.option:hover {
		background-color: #f5f5f5;
	}

	.option.selected {
		background-color: #f0f0f0;
	}

	.option-text {
		color: #333;
		font-size: 15px;
	}

	.checkmark {
		color: red;
		font-weight: bold;
	}
</style>